<template>
	<view class="content">
		<image class="logo" src="/static/adduser.png" @click="add"></image>
		<text class="title">创建新关系</text>
		
		<n-form class="form box-item" v-show="show">
			<p>请填写需要AA的名字</p>
			<template v-for="(item,index) in formState" :key="index">
				<create-model :item="item" :index=index @setState="setState"></create-model>
			</template>
		<n-button :ghost=true @click="more">添加</n-button>
		<n-button @click="create">创建</n-button>
		</n-form>
		<task-list :getTasks="getTasks" @delTask="delTask"></task-list>
	</view>
</template>

<script setup>
	import store from '@/store'
	import {
		ref
	} from 'vue'
	import CreateModel from './CreateModel.vue'
	import TaskList from './TaskList.vue'
	const {
		addTask,
		delTask,
		getTasks
	} = store.app
	
	const formState = ref([''])
	const show = ref(false)
	const add = () => {
		show.value = true
	}
	const create = () => {
		formState.value = formState.value.filter((item)=>item!=='')
		// console.log(formState.value)
		if(formState.value.length>0) addTask(formState.value) 
		
		formState.value=[]
		show.value = false
	}
	const more = () => {
		formState.value.push('')
	}
	const setState = (index, val) => {
		formState.value[index] = val
	}
</script>

<style scoped>
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.form {
		width: 90%;
	}
	p{
		margin-bottom: 20rpx;
	}
</style>
